﻿@import "../../_theme";

#page-head{
    margin-top:1rem;
}

#iq-head-up {
    height: 8rem;
    background-image: url('/UI/imgs/banner-bk-1.jpg');
    background-size: cover;

    & > h3 {
        position: absolute;
        display: inline-block;
        bottom: 1rem;
        left: 20rem;
        color: $ClrThemeHotTxt;
    }
}
#iq-head-down {
    height: 6rem;
    background-color: $ClrThemeHotTxt;
    margin-bottom:2rem;
    & > img {
        position: absolute;
        display: inline-block;
        top: -4rem;
        left: 8rem;
        height: 8rem;
        width: 8rem;
        box-shadow:0 0 5px 0 black;
    }

    & > div {
        position: absolute;
        left: 20rem;
    }
}

#iq-overview {
    text-align: center;

    & > .iq-status {
        display: inline-block;
        width: 8rem;
        height: 8rem;
        font-size: 8rem;

        & > .icon-tender {
            color: $ClrOk;
        }

        & > .icon-remove-outline {
            color: $ClrImportant;
        }

        & > .icon-to-quotation {
            color: $ClrImportant;
        }
    }

    & > .iq-status-tip {
        font-weight: bold;
        height: 2.4rem;
        line-height: 2.4rem;
        padding:0 2rem;
        min-width:80%;
        margin-top:10px;
        display: inline-block;
        border-radius: 1.2rem;

        &.picketaged {
            color: $ClrFocusTxt;
            background-color: $ClrOk;
            box-shadow: 0 0 3px 0 darken($ClrOk,20);
        }

        &.closed {
            color: $ClrTheme;
            box-shadow: 0 0 3px 1px $ClrThemeTxt;
        }

        &.give-up {
            color: white;
            background-color: $ClrImportant;
            box-shadow: 0 0 3px 1px black;
        }
    }
}


.ii-process {
    text-align: center;
    padding-top: 3rem;
}

.iip-step {
    overflow: hidden;

    & > span {
        display: inline-block;
        padding: 0 2rem;
        height: 1.6rem;
        line-height: 1.6rem;
        margin: 0;
    }

    &.unstart {
        & .line, .node {
            background-color: $ClrDisable !important;
        }
    }
}

.iips-picketaged {
    background-color: $ClrOk;
    color: $ClrThemeHotTxt;
    box-shadow: 2px 3px 1px 0 $ClrThemeTxt;
}

.iips-urgent {
    background-color: $ClrImportant;
    color: $ClrThemeHotTxt;
    box-shadow: 2px 3px 1px 0 $ClrThemeTxt;
}

.iips-hot {
    background-color: $ClrFocus;
    color: $ClrFocusTxt;
    box-shadow: 2px 3px 1px 0 $ClrThemeTxt;
}

.node {
    position: absolute;
    top: -7px;
    margin-left: -7px;
    width: 14px;
    height: 14px;
    border-radius: 14px;
    background-color: $ClrFocus;
    display: inline-block;
}

.line {
    position: absolute;
    top: -1px;
    height: 2px;
    background-color: $ClrFocus;
}

.iips-line-bgn {
    width: 100%;
    margin: 20px 0 10px 0;

    & > .line {
        left: 50%;
        width: 50%;
    }
}

.iips-line {
    width: 100%;
    margin: 20px 0 10px 0;

    & > .line {
        left: 0;
        width: 100%;
    }

    &.active {
        &:after {
            content: ' ';
            position: absolute;
            top: -12px;
            margin-left: -12px;
            width: 20px;
            height: 20px;
            border-radius: 20px;
            border: 2px solid $ClrFocus;
            display: inline-block;
        }
    }
}

.iips-line-end {
    width: 100%;
    height: 100%;
    margin: 20px 0 10px 0;

    & > .line {
        left: 0;
        width: 50%;
    }

    &.picketaged {
        & > .node {
            background-color: transparent;

            & > .soicon-m {
                position: absolute;
                color: $ClrOk;
                transform: scale(2);
                left: 0;
                z-index: 2;
            }
        }
    }

    &.active {
        &:after {
            content: ' ';
            position: absolute;
            top: -12px;
            margin-left: -12px;
            width: 20px;
            height: 20px;
            border-radius: 20px;
            border: 2px solid $ClrFocus;
            display: inline-block;
        }
    }
}

.Tabs {
    font-weight: bold;
    color: lighten($ClrThemeTxt,20);

    & > span {
        padding: 1rem 2rem;
        display: inline-block;

        &.active {
            color: $ClrTheme;
        }
    }

    & > .tab-hover {
        border: none;
        height: 100%;
        background-color: white;
        top: 0;
        z-index: -1;
        box-shadow: 0px 5px 0px 0px white, 0 0 3px 0 $ClrTheme;
    }
}

#iq-dtl {
    min-height: 50rem;
    height: auto;
    padding:1rem;
    margin-bottom:4rem;

    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        box-shadow: 0 0 3px 0 $ClrTheme;
        z-index: -2;
        background-color: white;
    }

    & > .row {
        & > h4 {
            margin-bottom: 5px;
        }
    }
}

#iq-attachment-box{
    margin-bottom:1rem;
}

.qtn-step {
    padding: 1rem 0;

    &.active {
        & > .title {
            color: $ClrFocus;
        }
    }

    &.pending {
        & > .title {
            color: $ClrDisable;
        }
    }

    &:before {
        content: '';
        position: absolute;
        left: 2rem;
        height: 100%;
        width: 1px;
        border-left: 1px solid $ClrTheme;
        z-index: -1;
    }

    & > .title {
        font-size: 2rem;
        height: 2rem;
        line-height: 2rem;
        margin: 0 0 1rem 1rem;
        font-weight: bold;

        & > i {
            background-color: white;
            width: 2rem;
        }

        &>.icon-ok{
            color:$ClrOk !important;
        }
    }

    & > .body {
        background-color: $ClrControllerBk;
        padding-left: 2rem;
    }
}

.step1 {
    & > .to-confirm {
        text-align: center;
        padding: 2rem 0;

        & > button {
            padding: 0 2rem;
        }
    }

    & > .rejected {
        text-align: center;
        padding: 2rem 0;

        & > h4,h3 {
            color: $ClrImportant;
        }
    }

    & > .confirmed {
        text-align: center;
        padding: 2rem 0;
    }
}

#qtn-remark{
    display:block;
    width:100%;
    height:auto;
    max-height:12rem;
    overflow:auto;
    line-height:4rem;
}

.step2 {
    & table {
        width: 100%;
        margin-top: 1rem;
        & tr{
            padding:0;
        }
        &.readonly {
            & td {
                background: $ClrControllerBk;
            }
        }

        & th, & td {
            padding:0;
            text-align: center;
            border-bottom: 1px solid $ClrThemeTxt;
            border-right: 1px solid $ClrThemeTxt;

            &>input{
                text-align:center;
            }
        }

        & th {
            color: #888A8F;
            background-color: rgba(234, 235, 237, 0.92);
        }

        & td:first-child, & th:first-child {
            border-left: 1px solid $ClrThemeTxt;
        }
    }
}

#qtn-draft-tip {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -96px;
    margin-top: -96px;
    background-image: url('/UI/imgs/icon-tags.png');
    background-size: 2400px auto;
    width: 192px;
    height: 192px;
    background-repeat: no-repeat;
    background-position: -1520px -430px;
    opacity:0.4;
}

.icon-go-up {
    position: absolute;
    right: 1px;
    height: 1rem;
    top: 50%;
    margin-top: -.5rem;
    color: $ClrImportant;
}

.icon-go-down {
    position: absolute;
    right: 1px;
    height: 1rem;
    top: 50%;
    margin-top: -.5rem;
    color: $ClrOk;
}

td, th {
    &.num {
        width: 3%;
    }

    &.brand {
        width: 8%;
    }

    &.name {
        width: 10%;
    }

    &.q-price {
        width: 10%;
        background-color: white;
        z-index: 1;
        padding:0 1px !important;

        & > input {
            border: none;

            &:focus, :active {
                box-shadow: none !important;
            }

                &:focus + label,:active+label {
                    box-shadow: 0 0 3px saturate($ClrTheme,20);
                    border: 1px solid $ClrTheme;
                }
        }

        & > label {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            z-index: -1;
            pointer-events:none;    
        }
    }

    &.count {
        width: 10%;
    }

    &.model {
        width: 22%;
    }

    &.spec {
        width: 22%;
    }

    &.remark {
        width: 8%;

        & > span {
            display: block;
            max-height: 5rem;
            overflow: hidden;
        }
    }
}

.deli-time, .offer-time{
    width:15%;
}
.deli-way, .deli-stl, .invoice {
    width: 20%;
}
.q-remark {
    & > div {
        border:none;
    }
}

.total-amount{
    text-align:right;
    position:relative;
    padding-right:2rem;
}

#deli-way-option,
#deli-stl-option,
#invoice-option,
#taxrate-option {
    background-color: white;
    box-shadow: 5px 6px 7px -5px black;
    cursor: pointer;

    & > li {
        height: 4rem;
        line-height: 4rem;
        text-align: center;

        &:hover {
            background-color: $ClrHover;
        }

        &.slcted {
            background-color: $ClrSlcted;
        }
    }
}


.step3{
    &>.body{
        padding:2rem;
        text-align:center;

        &>button{
            margin-top:2rem;
            margin-bottom:1rem;
            padding:0 1rem;
        }
    }
}

.step4 {
    & > .body {
        padding: 2rem;
        text-align:center;
    }
}

#qtn-atch-slctor{
    border:4px dashed white;
    cursor:pointer;
    text-align:center;
    padding:1rem 0;
    display:inline-block;
    float:none !important;

    &>h5{
        color:$ClrImportant;
    }
}

.step5{
    &>.body{
        padding:2rem;
        text-align:center;
    }
}